開發網站時，視覺設計上都會採用一致的風格，很大的機會有重複、類似的部份，不論是功能上的重複或是排板上的類似，我們會希望將這些部份抽出來做成樣板，然後動態地將不同內容置入其中。這邊將會分兩天使用兩種樣板引擎：Jade跟EJS。
首先安裝jade
npm install jade
並且建立專案資料夾，裡面分別放上一支app.js以及包含views的資料夾，並在views裡面建立名為index.jade的樣板，在app.js裡面設定存放樣板的目錄路徑以及選用樣板引擎：
var express = require('express');
var app = express();
//設定存放樣板的目錄路
app.set('views', __dirname + '/views');
//選用樣板引擎
app.set('view engine', 'jade');
app.get('/', function(req, res){
//使用index樣板，並可以帶入參數給樣板利用
res.render('index',{title: 'index',msg2: 'Lez Template'});
});
//使用moudle.parent這個屬性來判定當前的script是否由外部script載入
if (!module.parent) {
app.listen(3000);
console.log('Express 在port 3000啟動！');
}
Jade最廣為人知的特色就是使用縮排方式去表示、敘述HTML tag，這樣的方式讓樣板原始碼看起來很簡潔，也是許多人愛用的原因。
也就是讓下面原始碼從：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title Here</title>
</head>
<body>
<h1 class="small">Jade Template</h1>
<p id="large">balalalala</p>
</body>
</html>
變成
doctype html
html(lang='en')
head
title Title Here
body
h1.small Jade Template
p#large balalalala
有一點類似sublime產生HTML的快捷語法，都是為了在開發時少寫很多code，還有利用縮排代替了原本的巢狀結構，讓可讀性上面更上層一樓(當然要先懂語法啦!)
標籤名稱 (標籤屬性1,標籤屬性2,...) 文字內容
//一般HTML
<img src="/images/xxx.jpg" alt="xxx圖片" />
//Jade寫法
img(src='/images/xxx.jpg',alt='xxx圖片")
標籤名稱 (id='aa',class='bb') 文字內容
//一般HTML寫法
<div id="aa" class="bb">TEXT</div>
//Jade寫法
div(id='aa',class='bb') TEXT
//Jade寫法二(如果標籤是div可以省略不寫)
div#aa.bb TEXT
iThome鐵人賽
看影片追技術